<script setup lang="ts">
import {computed, ref} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import HeaderVue from '@/components/Header.vue'
import {ServerUtils} from '@/serverUtils'
import {RouterLink, RouterView} from 'vue-router'
import {format as timeFormat} from 'silly-datetime'

const events = ref<any[]>([])
const refresh = async () => {
    events.value = []
    // type为2即活动分区，1000个应该能取完所有
    await ServerUtils.getSubareas(2, 1, 1000).then(subareas => {
        const configEvents = (window as any).cauis.events as any[]
        configEvents.map((event: any) => {
            let subarea = subareas.find(s => event.subarea_id == s.id)
            if (!subarea) return
            console.log(subarea)
            if (event.title == '$DEFAULT') {
                event.title = subarea.name
            }
            if (event.info == '$DEFAULT') {
                event.info = subarea.description ?? ''
            }
            if(event.page == '$DEFAULT'){
                event.page = 'e1'
            }
            event.subarea = subarea

            events.value.push(event)
        })
    })
}
let closedEvents = computed(() => {
    return events.value.filter(e => e.closed)
})
let activeEvents = computed(() => {
    return events.value.filter(e => !e.closed)
})
refresh()

</script>

<template>
    <header>
        <HeaderVue />
    </header>
    <div class="event-index">
        <div style='margin-bottom: 60px;'
            v-if='activeEvents.length'>
            <div class="label1">
                进行中
            </div>
            <div class="event-index-main fhs"
                v-for='item of activeEvents'>

                <div class="item hp" @click="$router.push({path:`/event/${item.page}/${item.subarea_id}`})">
                    <div class="pic"
                        :style='`background-image: url("${item.image1}");`'>
                    </div>
                    <div class="below-pic">
                        <div class="event-title"
                            v-text='item.title' />
                        <div class="event-info"
                            v-text='item.info' />
                        <div class="baseline fhs">
                            <img src="icon1.svg" alt=""
                                width="20">
                            <div class="work-num">
                                {{ item.subarea.topic_num}}
                            </div>
                            <div class="deadline">
                                {{
                                        timeFormat(item.start_time,
                                            "YYYY-MM-DD")
                                }}
                                -
                                {{ timeFormat(item.end_time,
                                        "YYYY-MM-DD")
                                }}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div v-if='closedEvents.length'>
            <div class="label1">
                已结束
            </div>

            <div class="event-index-main fhs"
                v-for='item of closedEvents'>

                <div class="item hp" @click="$router.push({path:`/event/${item.page}/${item.subarea_id}`})">
                    <div class="pic"
                        :style='`background-image: url("${item.image1}");`'>
                    </div>
                    <div class="below-pic">
                        <div class="event-title"
                            v-text='item.title' />
                        <div class="event-info"
                            v-text='item.info' />
                        <div class="baseline fhs">
                            <img src="icon1.svg" alt=""
                                width="20">
                            <div class="work-num">
                                {{ item.subarea.topic_num}}
                            </div>
                            <div class="deadline">
                                {{
                                        timeFormat(item.start_time,
                                            "YYYY-MM-DD")
                                }}
                                -
                                {{ timeFormat(item.end_time,
                                        "YYYY-MM-DD")
                                }}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
$core-width : 1080px;

.event-index {
    width: $core-width;
    margin: 0 auto;
    column-gap: 20px;

    .label1 {
        font-weight: bold;
        font-size: 24px;
        margin: 30px 0;
    }

    .event-index-main {
        width: 100%;
        flex-wrap: wrap;
        gap: 20px;
        column-gap: 30px;
        row-gap: 20px;

        .item {
            box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 30%) inset, 0 0.5em 1em rgb(0 0 0 / 2%);
            background-color: white;
            border-radius: 8px;
            flex-basis: calc((100% - 30px)/2);
            height: 420px;

            .pic {
                height: 0;
                padding-bottom: 50%;
            }

            .below-pic {
                margin: 18px 36px 0;
            }

            .event-title {
                font-size: 24px;
                color: #333;
                padding-bottom: 10px;

            }

            .event-info {
                font-size: 14px;
                color: #999;
                /* line-height: 20px; */

            }

            .baseline {
                margin-top: 26px;
            }

            .work-num {
                margin-left: 8px;
                font-size: 14px;
                color: #999;
            }

            .deadline {
                color: #999;
                flex-grow: 1;
                font-size: 14px;
                text-align: right;
            }
        }

        .item:hover {

            box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 30%) inset, 0 0.5em 1em rgb(0 0 0 / 8%);
            transform: translateY(-1px);
            transition: all 0.3s ease;

        }
    }
}
</style>

